<template>
  <div class="center_div"> 
    <el-alert v-for="item in currentList" :key="item.awardrecordid"
              :title="'恭喜'+item.departmentname + '的' + item.employeename + '获得了【  ' + item.awardname + '  】的奖励'"
              type="success" center :closable="false" show-icon style="margin-top: 10px"></el-alert>
    <el-pagination
      style="margin:20px auto 20px 400px;"
      layout="prev, pager, next"
      :total="allPages"
      @current-change="changePage"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "amuse-record",
    data() {
      return{
        recordList:  [],
        currentList: [],
        allPages: 0
    }
    },
  created() {
    this.fetchRocard()
  },
  methods: {
    async fetchRocard(){
      let {code ,data ,msg} = await this.$post('/awardshow')
      if(code === 200) {
        this.recordList = data.awardrecord
        this.allPages = Number(this.recordList.length)
        this.currentList = this.recordList.slice(0, 10)
      }else {
        this.$message.error(msg)
      }
    },
    changePage(page) {
        this.currentList = this.recordList.slice((page-1)*10, (page-1)*10 + 10)
    }
  }
}
</script>

<style>
    .center_div{
      width: 60%;
      margin:0 auto;
      margin-bottom: 50px;
    }

</style>